<template>
  <div>
    <div class="app-container">
      <!-- 中 -->
      <el-card class="center-card box-card">
        <div>
          <span><i class="el-icon-notebook-2" />数据列表</span>
        </div>
      </el-card>
      <!-- /中 -->

      <!-- 下 -->
      <el-card class="down-card box-card">
        <!-- 上表格 -->
        <div>
          <el-table border="" :data="arrOrder" style="width: 100%">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="id" label="编号" align="center" />
            <el-table-column prop="reason" label="原因类型" align="center" />
            <el-table-column prop="sort" label="排序" align="center" />
            <el-table-column prop="isshow" label="是否可用" align="center">
              <template slot-scope="{row}">
                <el-switch v-model="row.isshow" :active-value="1" :inactive-value="0" @change="switchChange($event,row)" />
              </template>
            </el-table-column>
            <el-table-column prop="addTime" label="添加时间" align="center" />
            <el-table-column label="操作" align="center">
              <template>
                <el-button size="mini">编辑</el-button>
                <el-button size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 下左右 -->
        <div class="last-item">
          <!-- 左 -->
          <div>
            <el-form :inline="true">
              <el-form-item>
                <el-select placeholder="批量操作" style="width: 200px" class="inp">
                  <el-option value="批量操作" label="批量操作" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 右 -->
          <div class="block right">
            <el-pagination
              :current-page="currentpage"
              :page-sizes="pageSizes"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            />
          </div>
        </div>
      </el-card>
      <!-- /下 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentpage: 1,
      pageSizes: [5, 10, 15],
      total: 20,
      arrOrder: [
        {
          id: 1,
          reason: '质量问题',
          sort: 1,
          isshow: 0, // false
          addTime: '2020-10-10'
        },
        {
          id: 2,
          reason: '尺码太大',
          sort: 1,
          isshow: 1,
          addTime: '2020-10-10'
        },
        {
          id: 3,
          reason: '颜色不喜欢',
          sort: 1,
          isshow: 0,
          addTime: '2020-10-10'
        }
      ]
    }
  },
  methods: {
    switchChange(e, data) {
      console.log(e, data)
      // console.log(this.arrOrder[0].isshow)
    }
  }
}
</script>

<style lang= 'scss' scoped>
.box-card {
  margin-bottom: 30px;
}
span {
  font-size: 20px;
}
.down-card {
  .last-item {
    margin-top: 30px;
  }
}
</style>
